<template>
	<div class="container">
		<div class="rectangle">
			<img src="../../../image/book.png" alt="1t.org China Action">
			<p><router-link to="/book">图书专栏</router-link></p>
		</div>
		<div class="rectangle">
			<img src="../../../image/j.png" alt="">
			<p><router-link to="/sign">积分兑换</router-link></p>
		</div>
		<div class="rectangle">
			<img src="../../../image/chat.png" alt="">
			<p><router-link to="/chat">交流中心</router-link></p>
		</div>
		<div class="rectangle">
			<img src="../../../image/g.png" alt="">
			<p>求购专区</p>
		</div>
		<div class="rectangle">
			<img src="https://www.cgf.org.cn/cgforgcn/image/banner-2.png" alt="绿色行动">
			<p><a href="https://lsgmxd.cgf.org.cn/lsgmxdorg/index.html">绿色行动</a></p>
		</div>

	</div>
</template>

<script>
	export default {
		name: "AppContent"
	}
</script>

<style scoped>
	.container {
		height: 80px;
		width: 1200px;
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		margin-top: 10px;
		margin-bottom: -70px;
	}

	.rectangle {
		width: 16%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		border: 1px solid #CCCCCC;
		margin: 0 60px;

	}

	/* 第一个 div 的特殊样式 */
	.rectangle:nth-child(1) {
		margin: 0;
		flex-direction: column;


	}

	/* 第一个 div 中的 img 不再需要右边距，因为它是最后一行 */
	.rectangle:nth-child(1) img {
		margin-right: 0;
	}

	/* 保持其他 div 的样式不变 */
	.rectangle:nth-child(n+2) {
		/* 保持原来的外边距 */
		margin: 0 0px;
	}

	.rectangle:nth-child(1) {
		background-color: #e5dbbd;
	}

	.rectangle:nth-child(5) {
		background-color: #56b16c;
	}

	.rectangle:nth-child(2) {
		background-color: #db4437;
	}

	.rectangle:nth-child(3) {
		background-color: #47a3fe;
	}

	.rectangle:nth-child(4) {
		background-color: #c7ae8e;
	}

	.rectangle img {
		max-width: 18%;
		height: auto;
		margin-right: 10px;
	}

	.rectangle:nth-child(2) img,
	.rectangle:nth-child(3) img,
	.rectangle:nth-child(4) img {
		max-width: 18%;
		height: auto;
		margin-right: 10px;
	}


	.rectangle:nth-child(1) img {
		max-width: 18%;
		height: auto;
		margin-right: -70px;
	}

	a {
		text-decoration: none;
		color: inherit;
	}

	.rectangle p {
		color: white;
	}
</style>